import React, { Component } from 'react';
import './index.less'
import { NavBar, Toast, Tag, Cell, ProductCard, Input, SubmitBar } from 'react-vant';
import { Ellipsis, WapHomeO, Arrow,Alipay,WechatPay } from '@react-vant/icons'
import WithRouter from '../../router/WithRouter'
import {getOrderInfo,createOrderNum,payMent} from '@/Api/order'
import Myloading from '@/components/Loading';
class ComfirmOrder extends Component {
    state = {
        info:null,
        payList:[
            {
                name:"微信",
                type:"weixin"
            },{
                name:"支付宝",
                type:"alipay"
            }
        ],
        activeIndex:0,
        address:{
            id:0,
            province:"",
            city:"",
            district:"",
            phone:"",
            detail:"",
            realName:""
        },
        mark:"",
        preOrderNo:"",
        payHtml:""
    }
    render() {
        let {payList,info,address,mark,payHtml} = this.state;
        return (
            <div className='order'>
                <NavBar
                    title="确认订单"
                    leftText={<WapHomeO fontSize={20} color='#fff' />}
                    rightText={<Ellipsis fontSize={20} color='#fff' />}
                    onClickLeft={() => {
                        this.props.router.navigate('/')
                    }}
                    onClickRight={() => Toast('按钮')}
                    fixed
                />
                {
                    info &&    <React.Fragment>
                    <div className='header'>
                        {
                            address.id && <div className='addresss' onClick={()=>{
                                // 选择收货地址去
                                 this.props.router.navigate("/address",{
                                    // type 0表示从确认订单跳转到收货地址页面
                                    state:{
                                        type:0
                                    }
                                 })
                            }}>
                            <div>
                                <Tag type="primary">收获地址</Tag>
                            </div>
                            <div className='addressName'>
                                <span>{address.realName}</span> <span>{address.phone}</span>
                            </div>
                            <div className='addressInfo'>
                                <span className='default'>[默认]</span><span>
                                {address.province}{address.city}{address.district}{address.detail}
                                </span>
                            </div>
                            <div className='right'>
                                <Arrow color='#919191' fontSize={15} />
                            </div>
                        </div> 
                        }
                        {
                            !address.id &&  <div className='addresss' onClick={()=>{
                                // 选择收货地址去
                                 this.props.router.navigate("/address",{
                                    // type 0表示从确认订单跳转到收货地址页面
                                    state:{
                                        type:0
                                    }
                                 })
                            }}>
                            <div>
                                <Tag type="primary">请添加收获地址</Tag>
                            </div>
                            <div className='right'>
                                <Arrow color='#919191' fontSize={15} />
                            </div>
                        </div>
                        }
                    </div>
                    <div className='box'>
                        <div className='goodsnum'>
                            共{info.orderInfoVo.orderDetailList.length}件商品
                        </div>
                        <div>
                        {
                            info.orderInfoVo.orderDetailList.map((item,index)=>{
                                return (
                                    <div key={index}>
                                    <ProductCard
                                        num={item.payNum}
                                        price={item.price}
                                        desc={item.sku}
                                        title={item.productName}
                                        thumb={item.image}
                                    />
                                </div>
                                )
                            })
                        }
                        </div>
                    </div>
                    <div className='box'>
                        <Cell title='快递费用' value='免运费' />
                        <Cell title='备注信息' />
                        <Cell style={{ marginTop: 10 }}>
                            <Input.TextArea placeholder="请添加备注150字以内" maxLength={150} showWordLimit value={mark} onChange={(value)=>{
                                this.setState({
                                    mark:value
                                })
                            }}/>
                        </Cell>
                    </div>
                    <div className='box'>
                        <Cell title='支付方式' />
                        <div className='pay'>
                            {
                                payList.map((item,index)=>{
                                    return (
                                        <div key={index} className={this.state.activeIndex===index?'paytype active':'paytype'} onClick={()=>{
                                            this.setState({
                                                activeIndex:index
                                            })
                                        }}>
                                            <div>
                                            {item.name==='支付宝' && <Alipay color='red' fontSize={20} style={{
                                                verticalAlign:"middle"
                                            }}/>}
                                            {item.name==='微信' && <WechatPay color='red' fontSize={20} style={{
                                                verticalAlign:"middle"
                                            }}/>}
                                            &nbsp; &nbsp;
                                             {item.name}支付</div>
                                            <div className='type'>   
                                                {item.name}快捷支付
                                            </div>
                                        </div>
                                    )
                                })
                            }
                        </div>
                    </div>
                    <div className='box'>
                        <Cell title='商品总价' value={info.orderInfoVo.proTotalFee}/>
                    </div>
                    <div>
                        <SubmitBar price={info.orderInfoVo.proTotalFee*100} buttonText="立即结算" onSubmit={()=>this.pay()}/>
                    </div>
                </React.Fragment>
                }
                {
                    !info && <Myloading></Myloading>
                }
                <div dangerouslySetInnerHTML={{__html:payHtml}}></div>
            </div>
        )
    }
    async componentDidMount(){
        // 获取订单号
        let {preOrderNo} = this.props.router.location.state;
        // 根据订单号获取订单详情
        let res = await getOrderInfo(preOrderNo);
        if(res.data.code !==200){
            Toast(res.data.message);
            this.props.router.navigate(-1)
            return
        }
        this.setState({
            info:res.data.data,
            address:{
                id:res.data.data.orderInfoVo.addressId,
                realName:res.data.data.orderInfoVo.realName,
                phone:res.data.data.orderInfoVo.phone,
                province:res.data.data.orderInfoVo.province,
                city:res.data.data.orderInfoVo.city,
                district:res.data.data.orderInfoVo.district,
                detail:res.data.data.orderInfoVo.detail
            },
            preOrderNo
        })
        // 获取本地收货地址
        let address = JSON.parse(localStorage.getItem("address"));
        console.log(address)
        if(!address){
            return
        }
        let {id,province,city,district,realName,phone,detail} = address;
        this.setState({
            address:{
                id,
                province,
                city,
                district,
                realName,
                phone,
                detail
            }
        })
    }
    componentWillUnmount(){
        // 删除本地收货地址
        localStorage.removeItem("address")
    }
    // 立即结算
    async pay(){
        let {address,payList,activeIndex,mark,preOrderNo} = this.state;
        let data = {
            addressId:address.id,
            couponId:0,
            mark:mark,
            payChannel:"weixinh5",
            payType:payList[activeIndex].type,
            phone:address.phone,
            preOrderNo:preOrderNo,
            realName:address.realName,
            shippingType:1,
            storeId:0,
            useIntegral:false
        }
        let res = await createOrderNum(data);
        if(res.data.code!==200){
            Toast(res.data.message)
            return;
        }
        let orderNo = res.data.data.orderNo;
        // 获取支付参数
        let params = {
            orderNo:orderNo,
            payChannel:"weixinh5",
            payType:payList[activeIndex].type,
            scene:0
        }
        // 请求服务端拉起支付进行支付
        let payres = await payMent(params);
        console.log(payres)
        if(payres.data.code !==200){
            Toast(payres.data.message);
            return;
        }
        // 若支付方式为微信支付 服务端会返回微信h5支付链接,前端只需要跳转到该链接即可拉起微信app进行支付
        if(payList[activeIndex].type==='weixin'){
            // window.location.href = '微信h5支付链接地址'
        }
        // 若支付方式为支付宝 则服务端会返回一个form表单 前端只需要将该from表单提交即可拉起支付宝app进行支付
        if(payList[activeIndex].type==='alipay'){
            let from = payres.data.data.alipayRequest;
            console.log(from)
            this.setState({
                payHtml:from
            },()=>{
                document.forms[0].submit();
            })
        }
    }
}
export default WithRouter(ComfirmOrder);